<template>
  <div class="app-container">
	<div class="bgWhite radius8 plr20 pt30 pb30">
		<div class="mb20">
		  <span class="fb fs16">部门公海分配规则</span>		  
		</div>
      <!-- 添加或修改 -->
      <el-form ref="formRef" :rules="rules" :model="form" label-width="10px">
        <el-form-item :label="title+':'" label-width="110px" prop="executionType" style="margin-bottom: 10px;">
          <el-radio-group v-model="form.executionType">
            <el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_opportuity_rules_type"
              :label="item.value" :value="item.value">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客户分配限制:"  label-width="110px" style="margin-bottom: 0;">
			<div class="flex col-center">
				<el-radio-group v-model="form.executionContent.customerAllocationFlag">
					<el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_is_flag" :label="item.value"
					  :value="item.value">{{ item.label }}
					</el-radio>
				 </el-radio-group>
				<div class="ml15">
					<el-input type="text" style="width:50px" v-model="form.executionContent.customerAllocationDay" />
					天内不能连续领取同一个客户
				</div>
			</div>
		</el-form-item>  	
		 <el-form-item label="">
			<div class="mb20">
				<div class="color2">
					<span class="color-red">*</span>说明： 客户被转移或者系统定时划入公海后，前负责人在N天内不能领取。
				</div>
				<div class="fs14 line-25 mb10 mt10">
					<div class="fb mb8"><span class="color-red">*</span>客户数量限制</div>
					<div class="pl10 color2">限制每个员工拥有的最大客户数</div>
					<div class="pl10 color2">当员工拥有客户数超过规定上限时，新增客户无法成功。</div>
					<div class="pl10 color2">如果在设置最大客户数前，员工所拥有客户数已超过上限，则原有客户不会影响，但是该员工无法再继续添加新客户。</div> 
				</div>
				<div class="flex col-center ml10">
					<el-radio-group v-model="form.executionContent.customerNumberFlag">
					  <el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_is_flag" :label="item.value"
					    :value="item.value">{{ item.label }}
					  </el-radio>
					</el-radio-group>
					<el-checkbox class="ml20" label="此规则仅限制“未成交”客户"
					  v-model="form.executionContent.customerNotTradingFlag" />
					<!-- 按员工数量上限 -->
					<el-checkbox label="按员工设置不同的客户数上限"
					  v-model="form.executionContent.userCustomerTopLineFlag" /> 
				</div> 
			</div>
          <el-table :data="form.executionContent.userCustomerList" style="width: 100%" :header-row-style="{
            background: '#FAFAFA',
            color: '#0C1019',
            height: '54px',
          }" :cell-style="{ height: '54px' }">

            <el-table-column label="每个员工拥有的最大客户 人数" align="center">
              <template v-slot="scope">
                <el-input type="text" style="width:50px" v-model="scope.row.customerNumber" />
              </template>
            </el-table-column>

            <el-table-column label="规则" align="center">
              <template #default="scope">
                <el-select v-model="scope.row.userIds" placeholder="Select" clearable multiple>
                  <template #label="{ label, value }">
                    <span>{{ label }}: </span>
                    <span style="font-weight: bold">{{ value }}</span>
                  </template>
                  <el-option v-for="item in selectDept" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span class="color-red">
                  {{ scope.row.userIds.length > 0 ? "" : "此规则针对：所有员工（特殊员工除外）" }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <el-button size="mini" class="linkBtnColor" type="text" icon="el-icon-delete" @click="removeRow(scope.$index)"
                  v-hasPermi="['rules:remove']">删除
                </el-button>
                <el-button v-if="scope.$index === form.executionContent.userCustomerList.length - 1" size="mini"
				class="linkBtnColor"
                  type="text" icon="el-icon-delete" @click="addRow()" v-hasPermi="['rules:add']">新增
                </el-button>
              </template>
            </el-table-column>
          </el-table>


          <!-- 客户类型数量上限 -->
          <el-checkbox style="margin-top: 30px;" label="根据客户类型分别设置客户数上限"
            v-model="form.executionContent.customerTypeTopLineFlag" />
          <el-table :data="form.executionContent.userTypeCustomerList" class="mt15" style="width: 100%" :header-row-style="{
            background: '#FAFAFA',
            color: '#0C1019',
            height: '54px',
          }" :cell-style="{ height: '54px' }">

            <el-table-column label="每个员工最多可拥有 用户类型" align="center">
              <template #default="scope">
                <dict-tag :options="bus_customer_type" :value="scope.row.userTypeCode" />
              </template>
            </el-table-column>

            <el-table-column label="人数" align="center">
              <template #default="scope">
                <el-input type="text" style="width:50px" v-model="scope.row.userNumber" />
              </template>
            </el-table-column>

            <el-table-column label="规则" align="center">
              <template #default="scope">
                此规则针对：所有员工（特殊员工除外）
              </template>
            </el-table-column>

          </el-table>


        </el-form-item>
      </el-form>

      <div slot="footer" class=" text-center">
        <el-button type="defaultBtn" size="large" style="width: 90px;"  @click="submitForm"
		v-hasPermi="['deptRules:edit']"
		>应用</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="RulesDeptHighseasAllocationSetup">
import { listRules, updateRules } from "@/api/business/rules";
import { listUser } from "@/api/system/user";

const { proxy } = getCurrentInstance();
const { bus_customer_type, bus_opportuity_rules_type } = proxy.useDict(
  "bus_customer_type", "bus_opportuity_rules_type"
);

const bus_is_flag = [
  {
    value: false,
    label: "不启用",
  },
  {
    value: true,
    label: "启用",
  },
];

// 遮罩层
const loading = ref(true);
// 选中数组
const ids = ref([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// 物流规则表格数据
const rulesList = ref([]);
// 弹出层标题
const title = ref("客户分配方式");
// 查询参数
const queryParams = ref({
  rulesCode: "dept_highseas_allocation",
  pageNum: 1,
  pageSize: 10,
});
// 表单参数
const form = ref({
  id: null,
  executionType: "1001",
  executionContent: {
    customerAllocationDay: null,
    customerAllocationFlag: null,
    customerNotTradingFlag: null,
    customerNumberFlag: null,
    customerTypeTopLineFlag: null,
    dealerNumber: null,
    peasantNumber: null,
    tradesmanNumber: null,
    userCustomerTopLineFlag: null,
    userCustomerList: [{
      customerNumber: null,
      userIds: []
    }],
    userTypeCustomerList: [{
      userTypeCode: null,
      userNumber: null,
      userIds: []
    }],
  },
});

const selectDept = ref([]);

// 构筑 生产资料编译为字典数据
function buildDict() {
  listUser(queryParams.value).then((response) => {
    var dictArray = response.rows;
    dictArray.forEach((element) => {
      selectDept.value.push({
        label: element.nickName,
        value: element.userId,
      });
    });
  });
};

/** 查询 规则列表 */
const getList = () => {
  loading.value = true;
  listRules(queryParams.value).then((response) => {
    form.value = response.rows[0];
  });
};
/** 提交按钮 */
const submitForm = () => {
  updateRules(form.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    getList();
  });
};

// 增加行
const addRow = () => {
  form.value.executionContent.userCustomerList.push({
    customerNumber: null,
    userIds: []
  }
  );
};

//删除 内联表行
const removeRow = (rowIndex) => {
  form.value.executionContent.userCustomerList.splice(rowIndex, 1);
  var l = form.value.executionContent.userCustomerList.length;
  if (l < 1) {
    addRow()
  }
};

getList();
buildDict();
</script>
